<template>
    <!-- 危险源-->
    <div class="model_hazard_details">
        <div class="real-time_monitoring">
            <div>
                <span>实时监测</span>
            </div>
        </div>
        <div class="real-time_monitoring_content">
            <div>
                <img src="@/assets/image/background.png" alt="">
                <span>达冠生生化—有机罐区</span>
            </div>
            <div>
                <div>
                    <span>监测点名：</span>
                    <span>达冠生化—有机罐区</span>
                </div>
                <div>
                    <span>所属企业：</span>
                    <span>达冠生化科技股份有限公司</span>
                </div>
                <div>
                    <span>详细地址：</span>
                    <span>山东省临沂市吕南县团林镇山东达冠生化科技</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import {ref} from 'vue'

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
</script>
<style lang="scss" scoped>
.model_hazard_details {
    padding: 30px 42px;

    .real-time_monitoring {
        width: 100%;
        border-bottom: 1px solid rgba(14, 150, 255, 0.29);

        > div {
            width: 90px;
            padding: 12px 8px;
            border-bottom: 2px solid #0E96FF;
            text-align: center;
            font-size: 18px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #1B93FB;
        }
    }

    .real-time_monitoring_content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 30px;
        padding: 0 5px;

        > div {
            &:nth-of-type(1) {
                width: 35%;
                margin-right: 20px;

                img {
                    width: 100%;
                    height: 135px;
                }

                span {
                    display: inline-block;
                    width: 100%;
                    text-align: center;
                    margin-top: 14px;
                    font-size: 12px;
                    font-weight: 500;
                    color: #FFFFFF;
                }
            }

            &:nth-of-type(2) {
                width: calc(65% - 20px);

                > div {
                    margin-bottom: 15px;
                    span {
                        font-size: 14px;

                        &:nth-of-type(1) {
                            color: #B6B5B5;
                        }

                        &:nth-of-type(2) {
                            color: #fff;
                        }
                    }
                    &:last-child{
                        margin-bottom: 0;
                    }
                }
            }
        }
    }

}

</style>
